<template>
  <div class="flex flex-col items-center p-5 min-h-screen">
    <a-breadcrumb class="flex items-center mb-4">
      <home-outlined class="mr-2" />
      <span>当前位置:&nbsp;&nbsp;</span>
      <a-breadcrumb-item>
        <a href="/Agriculture/ASL/public" class="text-blue-500 hover:underline">首页</a>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/popsci" class="text-blue-500 hover:underline">科普知识</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/popsci/information" class="text-blue-500 hover:underline">入侵物种信息</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item v-if="items.length > 0">{{ items[0].chineseName }}</a-breadcrumb-item>
    </a-breadcrumb>

    <div class="bg-white w-full max-w-9xl p-6 mb-8 rounded-lg custom-shadow">
      <h1 class="text-3xl font-bold text-center mb-4" v-if="items.length > 0">{{ items[0].name }}</h1>
      <div class="flex">
        <div class="flex-1 pr-4">
          <div class="space-y-4">
            <a-card v-for="(item, index) in items" :key="index" class="p-4 border border-gray-300 bg-gray-50 rounded-lg">
              <div class="detail-item">
                <strong>完整学名:</strong> {{ item.name }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
              <div class="detail-item">
                <strong>中文名:</strong> {{ item.chineseName }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
              <div class="detail-item">
                <strong>英文名:</strong> {{ item.englishName }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
              <div class="detail-item">
                <strong>分类地位:</strong> {{ item.classification }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
              <div class="detail-item">
                <strong>上级名称:</strong> {{ item.superiorName }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
              <div class="detail-item">
                <strong>界:</strong> {{ item.jie }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
              <div class="detail-item">
                <strong>门:</strong> {{ item.men }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
              <div class="detail-item">
                <strong>纲:</strong> {{ item.gang }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
              <div class="detail-item">
                <strong>目:</strong> {{ item.mu }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
              <div class="detail-item">
                <strong>科:</strong> {{ item.ke }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
              <div class="detail-item">
                <strong>属:</strong> {{ item.shu }}
                <hr class="border-dashed border-gray-300 my-2" />
              </div>
            </a-card>
          </div>
        </div>

        <div class="flex-1 flex justify-center items-center">
          <div class="cursor-pointer" @click="openModal">
            <div v-if="items.length > 0 && items[0].imageUrl">
              <img
                  :src="items[0].imageUrl"
                  :alt="items[0].chineseName + ' Image'"
                  class="max-w-full max-h-[400px] object-contain"
              />
            </div>
          </div>

          <!-- 模态框 -->
          <div v-if="isModalOpen" class="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50" @click="closeModal">
            <div class="bg-white p-4 rounded-lg shadow-lg relative" @click.stop>
              <img
                  :src="items[0].imageUrl"
                  :alt="items[0].chineseName + ' Image'"
                  class="w-full h-auto"
              />
              <span class="absolute top-2 right-4 text-2xl cursor-pointer" @click="closeModal">&times;</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white w-full max-w-9xl p-4 rounded-lg custom-shadow mb-8">
      <div class="text-xl text-center mb-4">详细信息</div>
      <component
          :is="AllTabs"
          v-model:items="items"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import { HomeOutlined } from "@ant-design/icons-vue";
import { baseURL } from '../apis/homeAPI';
import AllTabs from "../Tabs/AllTabs.vue";

const route = useRoute();
const items = ref([]);

const isModalOpen = ref(false);

const openModal = () => {
  isModalOpen.value = true;
};

const closeModal = () => {
  isModalOpen.value = false;
};

const fetchItem = async (id: string) => {
  try {
    const response = await axios.get(baseURL + `/api/invasive-species-informations/${id}/?populate=*`);
    const data = response.data.data.attributes;

    const imageUrl = data.image?.data?.attributes?.url;

    items.value = [{
      name: data.ScientificName,
      chineseName: data.ChineseName,
      englishName: data.EnglishName,
      classification: data.CategoricalStatus,
      superiorName: data.ParentName,
      imageUrl: imageUrl ? baseURL + `${imageUrl}` : null,
      jie: data.jie,
      men: data.men,
      gang: data.gang,
      mu: data.mu,
      ke: data.ke,
      shu: data.shu,
      DistributionInfo: data.DistributionInfo,
      BiologicalCharacteristics: data.BiologicalCharacteristics,
      EcologicalCharacteristics: data.EcologicalCharacteristics,
      IdentificationMethods: data.IdentificationMethods,
      InvasionCharacteristics: data.InvasionCharacteristics,
      SimilarSpecies: data.SimilarSpecies,
      OccurrenceLocation: data.OccurrenceLocation,
      GeneralImpact: data.GeneralImpact,
      ControlMethods: data.ControlMethods,
      position: data.position
    }];
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

onMounted(() => {
  const id = route.params.id as string;
  fetchItem(id);
});
</script>

<style scoped>
.custom-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
